<template>
  <div class="profile-container">
    <div class="top-title-group">企业信息</div>
    <div class="middle-form-group">
      <el-form ref="profileForm" :model="profileForm" label-width="150px" label-position="left">
        <el-form-item label="企业Logo">
          <div class="upload-item-group">
            <el-upload action="#" list-type="picture-card" :auto-upload="false">
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <i class="el-icon-download"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <el-avatar style="margin-left:30px" shape="square" :size="150" :src="squareUrl"></el-avatar>
          </div>
          <div class="upload-msg-style">建议上传图片尺寸为60px*60px，若不设置则使用系统默认头像</div>
        </el-form-item>
        <el-form-item required label="企业名称">
          <el-input style="width:400px" v-model="profileForm.name1" placeholder="请输入企业名称"></el-input>
        </el-form-item>
        <el-form-item label="企业账户">
          <el-input style="width:400px" v-model="profileForm.name2" placeholder="请输入邮箱地址" disabled></el-input>
        </el-form-item>
        <el-form-item label="所属行业">
          <el-select style="width:400px" v-model="profileForm.name3" placeholder="请选择">
            <el-option label="请选择" value="请选择"></el-option>
            <el-option label="教育" value="教育"></el-option>
            <el-option label="互联网" value="互联网"></el-option>
            <el-option label="娱乐" value="娱乐"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="团队规模">
          <el-select style="width:400px" v-model="profileForm.name4" placeholder="请选择">
            <el-option label="请选择" value="请选择"></el-option>
            <el-option label="10人以下" value="10人以下"></el-option>
            <el-option label="10-99人" value="10-99人"></el-option>
            <el-option label="100-499人" value="100-499人"></el-option>
            <el-option label="500人以上" value="500人以上"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系人姓名">
          <el-input style="width:400px" v-model="profileForm.name5" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="联系人电话">
          <el-input style="width:400px" v-model="profileForm.name6" placeholder="请输入客服手机号码"></el-input>
        </el-form-item>
        <el-form-item label="公司地址">
          <el-input style="width:400px" v-model="profileForm.name7" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="备注信息">
          <el-input style="width:400px" v-model="profileForm.name8" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSave">保 存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "SettingEnterpriceInfo",
  components: {},
  props: {},
  data() {
    return {
      imageUrl: "",
      profileForm: {
        name1: "七尾云科技有限公司",
        name2: "1339000@163.com",
        name3: "请选择所属行业",
        name4: "请选择团队规模",
        name5: "杜宇",
        name6: "17789067899",
        name7: "",
        name8: ""
      }
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    onSave() {
      this.$store.commit("setEnterpriseProfile", this.profileForm);
      this.$message({
        message: "更新企业信息成功",
        type: "success"
      });
    }
  },
  created() {
    this.profileForm = this.$store.state.enterpriseProfile;
  },
  mounted() {}
};
</script>

<style scoped>
.profile-container {
  background-color: #fff;
  border-radius: 5px;
  padding: 20px;
}
.middle-form-group {
  padding-left: 60px;
}
.upload-item-group {
  display: flex;
  align-items: center;
}
.upload-msg-style {
  color: #cccccc;
}
.top-title-group {
  padding-bottom: 20px;
  border-bottom: 1px solid #f2f2f2;
  font-size: 20px;
  margin-bottom: 20px;
}
.password-title-style {
  padding-top: 20px;
  border-top: 1px solid #f2f2f2;
  margin-bottom: 20px;
}
</style>
<style>
.el-form--label-left .el-form-item__label {
  color: #c0c4cc;
}
</style>
